﻿<!DOCTYPE html>
<html lang="en">
<head>
  	<title>CSS3 Tricks</title>
  	<meta charset="utf-8">
    <meta name="description" content="Your description">
    <meta name="keywords" content="Your keywords">
    <meta name="author" content="Your name">
	<link rel="stylesheet" href="css/style.css">
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/script.js"></script>
<!--[if lt IE 8]>
   <div style=' clear: both; text-align:center; position: relative;'>
     <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
       <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
    </a>
  </div>
<![endif]-->
<!--[if lt IE 9]>
	<script src="js/html5.js"></script>
	<link rel="stylesheet" href="css/ie.css"> 
<![endif]-->
</head>
<body id="propage">
<!-- PRO Framework Panel Begin -->
<div id="advanced"><span class="trigger"><strong></strong><em></em></span><div class="bg_pro"><div class="pro_main"><span class="pro_logo"></span><ul class="pro_menu"><li><a href="index.html"><img src="images/pro_images/pro_home.png" alt=""></a></li><li><a href="404.html">Pages<span></span></a><ul><li><a href="under_construction.html">Under Construction</a></li><li><a href="intro.html">Intro Page</a></li><li><a href="404.html">404 page</a></li></ul></li><li><a href="layouts.html">Layouts</a></li><li><a href="typography.html">Typography</a></li><li><a href="portfolio.html">Gallery Layouts<span></span></a><ul><li><a href="portfolio.html">Portfolio</a></li><li><span></span><a href="just-slider.html">Sliders</a><ul><li><a href="just-slider.html">Just Slider</a></li><li><a href="kwicks.html">Kwicks Slider</a></li><li><a href="functional-slider.html">Functional Slider</a></li></ul></li><li><a href="gallery-page1.html">Gallery</a></li></ul></li><li class="current"><a href="misc.html">Extras<span></span></a><ul><li><a href="social_media.html">Social and Media<br> Sharing</a></li><li class="current"><a href="css3.html">CSS3 Tricks</a></li><li><a href="misc.html">Misc</a></li></ul></li></ul><div class="pro_clear"></div></div></div><div class="bg_pro2"></div></div>
<!-- PRO Framework Panel End -->
<!-- Header -->
<header>
    <div class="main">
        <h1><a href="index.html">Prospect</a></h1>
        <span class="phone">Call Toll-Free:  <span>1-800-559-65-80</span></span>
        <nav>
            <ul class="sf-menu">
                <li><a href="index.html">About us</a><ul>
                        <li><a href="more.html">Who We Are</a></li>
                        <li><a href="more.html">Our Mission</a></li>
                    </ul>
                </li>
                <li><a href="index-1.html">Services</a></li>
                <li><a href="index-2.html">Solutions</a></li>
                <li><a href="index-3.html">Support</a></li>
                <li><a href="index-4.html">partners</a></li>
                <li><a href="index-5.html">Contacts</a></li>
            </ul>
        </nav>
        <div class="clear"></div>
    </div>
</header>
<!-- Content -->
<section id="content">
<div class="container_24">
<!--  Hovers Begin -->
		<div class="pro_wrapper"><div class="grid_24"><h2 class="pro_title3">CSS3 Tricks</h2>
			<h6>Please note that this will only work properly in modern browsers that support the CSS3 properties in use.</h6>
			<h3 class="pro_title3">Animated Hovers</h3></div>
		</div>
		<div class="pro_wrapper">
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_first">
					 <img src="images/stock_images/300x200_1.jpg" alt="" />
					 <div class="pro_mask">
						<h2>First Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					 </div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_second">
					 <img src="images/stock_images/300x200_2.jpg" alt="" />
					<div class="pro_mask"></div>
					<div class="pro_content">
						<h2>Second Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					</div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_third">
					 <img src="images/stock_images/300x200_3.jpg" alt="" />
					<div class="pro_mask"></div>
					<div class="pro_content">
						<h2>Third Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="pro_wrapper">
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_fourth">
					 <img src="images/stock_images/300x200_4.jpg" alt="" />
					 <div class="pro_mask">
						<h2>Fourth Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					 </div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_fifth">
					 <img src="images/stock_images/300x200_5.jpg" alt="" />
					<div class="pro_mask">
						<div class="pro_content">
						<h2>Fifth Hover</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
							<a href="#" class="pro_btn">Button</a>
						</div>
					</div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_sixth">
					 <img src="images/stock_images/300x200_6.jpg" alt="" />
					<div class="pro_mask"></div>
					<div class="pro_content">
						<h2>Sixth Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="pro_wrapper">
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_seventh">
					 <img src="images/stock_images/300x200_7.jpg" alt="" />
					 <div class="pro_mask">
						<h2>Seventh Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					 </div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_eighth">
					 <img src="images/stock_images/300x200_8.jpg" alt="" />
					<div class="pro_mask">
						<div class="pro_content">
						<h2>Eighth Hover</h2>
							<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
							<a href="#" class="pro_btn">Button</a>
						</div>
					</div>
				</div>
				</div>
			</div>
			<div class="grid_8">
				<div class="pro_wrapper">
				<div class="pro_view pro_view_ninth">
					 <img src="images/stock_images/300x200_1.jpg" alt="" />
					<div class="pro_mask pro_mask-1"></div>
					<div class="pro_mask pro_mask-2"></div>
					<div class="pro_content">
						<h2>Ninth Hover</h2>
						<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris fermentum dictum magna. Sed laoreet aliquam leo.</p>
						<a href="#" class="pro_btn">Button</a>
					</div>
				</div>
				</div>
			</div>
		</div>
		<div class="pro_wrapper"><div class="grid_24">
		<dl class="pro_description-box pro_description-box-pad">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
						<p>The structure of markup is very simple and intuitive. Create a container that will have our image and all the other infomation.</p>
<pre class="pro_htmlCode">&lt;div class="pro_view pro_view_first"&gt;
	&lt;img src="YourImage.jpg" alt="" /&gt;
	&lt;div class="pro_mask"&gt;
		&lt;h2&gt; Heading &lt;/h2&gt;
		&lt;p&gt; Text &lt;/p&gt;
		&lt;a href="#" class="pro_btn"&gt;Button&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="pro_descr_pad">Add the special class pro_view_first to the element with the class pro_view for the first effect.<br>
<p>In the <strong>second hover</strong> we will add the special class pro_view-second, but we will leave the element with the class pro_mask empty and wrap the description in a div with the class pro_content</p>
<pre class="pro_htmlCode">&lt;div class="pro_view pro_view_second"&gt;
	&lt;img src="YourImage.jpg" alt="" /&gt;
	&lt;div class="pro_mask"&gt;&lt;/div&gt;
	&lt;div class="pro_content"&gt;
		&lt;h2&gt; Heading &lt;/h2&gt;
		&lt;p&gt; Text &lt;/p&gt;
		&lt;a href="#" class="pro_btn"&gt;Button&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p class="pro_descr_pad">For other hover effects you can use the same HTML structure. You only need to change class <strong>pro_view_second</strong> to the following ones:<br>
<strong>pro_view_third</strong> - third effect<br>
<strong>pro_view_fourth</strong> - fourth effect<br>
<strong>pro_view_fifth</strong> - fifth effect<br>
<strong>pro_view_sixth</strong> - sixth effect<br>
<strong>pro_view_seventh</strong> - seventh effect<br>
<strong>pro_view_eight</strong> - eight effect<br></p>
<p>In <strong>ninth hover</strong>, we will use two pro_mask elements to slide them in from the bottom right and the top left:</p>
<pre class="pro_htmlCode">&lt;div class="pro_view pro_view_ninth"&gt;
	&lt;img src="YourImage.jpg" alt="" /&gt;
	&lt;div class="pro_mask pro_mask-1"&gt;&lt;/div&gt;
	&lt;div class="pro_mask pro_mask-2"&gt;&lt;/div&gt;
	&lt;div class="pro_content"&gt;
		&lt;h2&gt; Heading &lt;/h2&gt;
		&lt;p&gt; Text &lt;/p&gt;
		&lt;a href="#" class="pro_btn"&gt;Button&lt;/a&gt;
	&lt;/div&gt;
&lt;/div&gt;</pre>
<p>Define .pro_view and .pro_mask width and height which match image`s width and height in style.css file.</p>
<p>CSS3 has a really great potential for creating nice effects. Soon, we’ll hopefully be able to avoid the use of JavaScript for simple effects and rely 100% on CSS, in all browsers.</p>
						</div>
					</dd>
				</dl>
		</div></div>
<!--  Hovers End -->
		<div class="pro_wrapper">
<!--  Buttons Begin -->
			<div class="grid_24"><h3 class="pro_title">Animated Buttons</h3></div>
		</div>
		<div class="pro_wrapper">
			<div class="grid_24"><p>Add necessary class to the <strong>&lt;a&gt; </strong>tag (&lt;a href="#" class=""&gt; Button Text &lt;/a&gt;)</p></div>
		</div>
		<div class="pro_wrapper">
			<div class="grid_6">
				<div class="pro_buttons_pad2"><a href="#" class="pro_btn pro_style_1 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_style_1"</code></div>
				<div class="pro_buttons_pad2"><a href="#" class="pro_btn pro_warning pro_style_1 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_warning pro_style_1"</code></div>
				<div class="pro_buttons_pad2"><a href="#" class="pro_btn pro_success pro_style_1 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_success pro_style_1"</code></div>
				<div class="pro_buttons_pad2"><a href="#" class="pro_btn pro_danger pro_style_1 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_danger pro_style_1"</code></div>
				<div class="pro_buttons_pad2"><a href="#" class="pro_btn pro_inf pro_style_1 pro_notClicked">Any button may be longer</a><code class="pro_small-box-code2">class="pro_btn pro_inf pro_style_1"</code></div>
			</div>
			<div class="grid_6">
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_style_2 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_style_2"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_warning pro_style_2 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_warning pro_style_2"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_success pro_style_2 pro_notClicked">Any button may be longer</a><code class="pro_small-box-code2">class="pro_btn pro_success pro_style_2"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_danger pro_style_2 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_danger pro_style_2"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_inf pro_style_2 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_inf pro_style_2"</code></div>
			</div>
			<div class="grid_6">
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_style_3 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_style_3"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_warning pro_style_3 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_warning pro_style_3"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_success pro_style_3 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_success pro_style_3"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_danger pro_style_3 pro_notClicked">Any button may be longer</a><code class="pro_small-box-code2">class="pro_btn pro_danger pro_style_3"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_inf pro_style_3 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_inf pro_style_3"</code></div>
			</div>
			<div class="grid_6">
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_style_4 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_style_4"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_warning pro_style_4 pro_notClicked">Any button may be longer</a><code class="pro_small-box-code2">class="pro_btn pro_warning pro_style_4"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_success pro_style_4 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_success pro_style_4"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_danger pro_style_4 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_danger pro_style_4"</code></div>
				<div class="pro_buttons_pad"><a href="#" class="pro_btn pro_inf pro_style_4 pro_notClicked">Click me!</a><code class="pro_small-box-code2">class="pro_btn pro_inf pro_style_4"</code></div>
			</div>
		</div>
<!--  Buttons End -->
<!--  Images Styles Begin -->
		<div class="">
			<div class="grid_14">
				<h3 class="pro_title">CSS3 Images Style</h3>
				<div class="pro_pad-image"><span class="pro_image_round normaltip" title="Circle Image"></span></div>
				<div class="pro_pad-image"><span class="pro_image_card normaltip" title="Card Style"></span></div>
				<div class="pro_pad-image"><span class="pro_image_embossed normaltip" title="Embossed Style"></span></div>
				<div class="pro_pad-image"><span class="pro_image_soft-embossed normaltip" title="Soft Embossed Style"></span></div>
				<div class="pro_pad-image"><span class="pro_image_cut_out normaltip" title="Cutout Style"></span></div>
				<div class="pro_pad-image"><span class="pro_image_morphing_glowing normaltip" title="Morphing &amp; Glowing"></span></div>
				<div class="pro_pad-image"><span class="pro_image_glossy normaltip" title="Glossy Overlay"><span></span></span></div>
				<div class="pro_pad-image"><span class="pro_image_reflection normaltip" title="Reflection"><span></span></span></div>
				<div class="pro_clear"></div>
				<dl class="pro_description-box pro_description-box-pad">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
						<p>When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn't render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly.</p>
						<p>To add such images to the page you need to copy the code and in the style.css file define background image and image dimensions.</p>
						<p>HTML</p>				
						<p><strong>Circle Image</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_round"&gt;&lt;/span&gt;</pre>
						<p><strong>Card Style</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_card"&gt;&lt;/span&gt;</pre>
						<p><strong>Embossed Style</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_embossed"&gt;&lt;/span&gt;</pre>
						<p><strong>Soft Embossed Style</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_soft-embossed"&gt;&lt;/span&gt;</pre>
						<p><strong>Cutout Style</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_cut_out"&gt;&lt;/span&gt;</pre>
						<p><strong>Morphing &amp; Glowing</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_morphing_glowing"&gt;&lt;/span&gt;</pre>
						<p><strong>Glossy Overlay</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_glossy"&gt;&lt;/span&gt;</pre>
						<p><strong>Reflection</strong></p>
<pre class="pro_htmlCode">&lt;span class="pro_image_reflection"&gt;&lt;/span&gt;</pre>
						<p>CSS</p>
<pre class="pro_cssCode">.YourStyle{
background:url(YourImage.jpg) 0 0 no-repeat;
width:YourImageWidth px;
height:YourImageHeight px;
}</pre>		
						</div>
					</dd>
				</dl>
			</div>
<!--  Images Styles End -->
<!--  Shadows Begin -->
			<div class="grid_10">
				<h3 class="pro_title">Shadows on CSS3</h3>
				<div class="pro_pad-shadow"><div class="pro_lifted"><div class="pro_text-shadow">Lifted Shadow</div></div></div>
				<div class="pro_pad-shadow"><div class="pro_perspective"><div class="pro_text-shadow">Perspective Shadow</div></div></div>
				<div class="pro_pad-shadow"><div class="pro_raised"><div class="pro_text-shadow">Raised Block</div></div></div>
				<div class="pro_pad-shadow"><div class="pro_curved-vt-2"><div class="pro_text-shadow">Shadow with two vertical curves</div></div></div>
				<div class="pro_pad-shadow"><div class="pro_curved-hz-2"><div class="pro_text-shadow">Shadow with two horizontal curves</div></div></div>
				<dl class="pro_description-box pro_description-box-pad">
					<dt><a class="pro_description-dark">Description<span></span></a></dt>
					<dd>
						<div class="pro_inner">
						<p><strong>Lifted Shadow</strong></p>
<pre class="pro_htmlCode">&lt;div class="pro_lifted"&gt;
	&lt;div class="pro_text-shadow"&gt;
		Text
	&lt;/div&gt;
&lt;/div&gt;</pre>
						<p><strong>Perspective Shadow</strong></p>
<pre class="pro_htmlCode">&lt;div class="pro_perspective"&gt;
	&lt;div class="pro_text-shadow"&gt;
		Text
	&lt;/div&gt;
&lt;/div&gt;</pre>
						<p><strong>Raised Block</strong></p>
<pre class="pro_htmlCode">&lt;div class="pro_raised"&gt;
	&lt;div class="pro_text-shadow"&gt;
		Text
	&lt;/div&gt;
&lt;/div&gt;</pre>
						<p><strong>Shadow with two vertical curves</strong></p>
<pre class="pro_htmlCode">&lt;div class="pro_curved-vt-2"&gt;
	&lt;div class="pro_text-shadow"&gt;
		Text
	&lt;/div&gt;
&lt;/div&gt;</pre>
						<p><strong>Shadow with two horizontal curves</strong></p>
<pre class="pro_htmlCode">&lt;div class="pro_curved-hz-2"&gt;
	&lt;div class="pro_text-shadow"&gt;
		Text
	&lt;/div&gt;
&lt;/div&gt;</pre>
						</div>
					</dd>
				</dl>
			</div>
<!--  Shadows End -->
			<div class="pro_clear"></div>
		</div>
	</div>
</section>
<aside>
    <div class="container_24">
        <div class="wrapper">
            <article class="grid_12">
                <h6>Quick Links</h6>
                <div class="wrapper">
                    <article class="grid_4 alpha">
                        <ul>
                            <li><a href="more.html">About Us</a></li>
                            <li><a href="more.html">Testimonials</a></li>
                            <li><a href="more.html">Our Staff</a></li>
                            <li><a href="more.html">Events &amp; Press</a></li>
                            <li><a href="more.html">Contact Us</a></li>
                        </ul>
                    </article>
                    <article class="grid_4">
                        <ul>
                            <li><a href="more.html">Solutions &amp; Training</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">Production</a></li>
                            <li><a href="more.html">Risk Management</a></li>
                            <li><a href="more.html">Consultation</a></li>
                        </ul>
                    </article>
                    <article class="grid_4 omega">
                        <ul>
                            <li><a href="more.html">Sign Up</a></li>
                            <li><a href="more.html">Forums</a></li>
                            <li><a href="more.html">Affiliate Program</a></li>
                            <li><a href="more.html">FAQ</a></li>
                        </ul>
                    </article>
                </div>
            </article>
            <article class="grid_11 prefix_1">
                <h6>Contact Information</h6>
                <div class="wrapper">
                    <img class="img-indent-r" src="images/map.png" alt="">
                    <div class="extra-wrap">
                        <p>8901 Marmora Road Glasgow, D04 89GR</p>
                        Phone: +1 800 559 6580<br>
                        E-mail: mail@demolink.org<br>
                        <!--==============================footer=================================-->
                        <footer>
                            &copy; 2012 &nbsp; &nbsp;|&nbsp; &nbsp; <a href="index-6.html">Privacy Policy</a><br>
                        </footer>
                    </div>
                </div>
            </article>
        </div>
    </div>
</aside>
</body>
</html>